<template>
  <nav>
    <span class="city" @click="gotoCity">
      {{ city }}
      <i class="iconfont icon-lower-triangle"></i>
    </span>
    <ul>
      <!--  <li
        v-for="(item, index) in navList"
        :key="item"
        :class="{ active: activeNum === index }"
        @click="jumpPath(index)"
      >
        {{ item }}
      </li> -->
      <router-link
        tag="li"
        v-for="item in navList"
        :key="item.url"
        :to="item.url"
      >
        {{ item.title }}
      </router-link>
    </ul>
    <span class="iconfont icon-fangdajing"></span>
  </nav>
</template>

<script>
export default {
  name: "MyTabbar",
  data() {
    return {
      navList: [
        {
          title: "热映",
          url: "/home/index/hot",
        },
        {
          title: "影院",
          url: "/home/index/cinema",
        },
        {
          title: "待映",
          url: "/home/index/waitshow",
        },
        {
          title: "经典电影",
          url: "/home/index/classic",
        },
      ],
      activeNum: 0,
    };
  },
  methods: {
    // jumpPath(index) {
    //   this.activeNum = index;
    /*  switch (index) {
        case 0:
          this.$router.push("/home/index/hot");
          break;
        case 1:
          this.$router.push("/home/index/cinema");
          break;
        case 2:
          this.$router.push("/home/index/waitshow");
          break;
        case 3:
          this.$router.push("/home/index/classic");
          break;
      } */
    // },
    gotoCity() {
      this.$router.push("/city");
    },
  },
  computed: {
    city() {
      return this.$store.state.city.cityName;
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/commons.less";
nav {
  width: 100%;
  height: 46px;
  background-color: #fff;
  border-bottom: 1px solid @border-color;
  display: flex;
  font-size: @fontSize_16;

  .city {
    width: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    i {
      color: #b0b0b0;
    }
  }

  ul {
    flex: 1;
    display: flex;

    li {
      flex: 1;
      .center();
      position: relative;
    }

    // router-link-active 是router-link的默认类名
    .router-link-active {
      font-weight: 700;

      &::after {
        position: absolute;
        content: "";
        width: 40%;
        height: 4px;
        background: @theme-color;
        bottom: 4px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 2px;
      }
    }
  }

  .icon-fangdajing {
    width: 50px;
    .center();
    font-size: @fontSize_18;
    color: @theme-color;
  }
}
</style>
